// 定义请求的数据
var current = 1
var pagesize = 20
var filter = 'hot'
var saleType = 10
var sortType = 'id'
var sortMethod = 'ASC'
var search = ''
var category = ''

// 获取商品分类 - 从首页跳转过来的时候，携带了一个参数
// console.log( location.search );
// 用正则提取
// ?catgory=内衣配饰
// ?id=6&category=XXX
// ?id=6&category=XXX&cat=9
// [\u4e00-\u9fa5]  - 用来在正则中匹配一个中文汉字
// 非&的任意字符 - [^&] - 中括号中加^表示非
// 要在正则表达式中获取到其中一部分，就将这一部分使用()括起来
var reg = /category=([^&]+)/
var arr = decodeURI(location.search).match(reg)
// console.log(arr);
// 判断
if(arr && arr[1]){
    // 将分类显示在路径导航中
    $('.breadcrumb li.active.cat').text(arr[1])
    category = arr[1]
}

var reg = /keywords=([^&]+)/
var arr = decodeURI(location.search).match(reg)
if(arr && arr[1]){
    $('.breadcrumb.keywords li span').text(arr[1])
    search = arr[1]
    getData()
}

// 发送请求
getData()
function getData(){
    // 添加加载层
    // var loadId = layer.load(1, {
    //     shade: [1, '#000']
    // })
    $.get('http://localhost:8888/goods/list', {
        current,
        pagesize,
        filter,
        saleType,
        sortMethod,
        search,
        category
    }).then(res => {
        console.log(res);
        if(res.code === 1){
            // 动态渲染数据
            var html = ''
            res.list.forEach(item => {
                html += `
                    <li>
                    <img src="${item.img_big_logo}" alt="">
                    <div class="title">
                        <span>${item.title}</span>
                    </div>
                    <div class="price">
                        <i>￥${item.price}</i><em>￥${(+item.price*1.1).toFixed(2)}</em>
                    </div>
                    <div class="box">
                        <div class="box1">已售87%</div>
                        <div class="box2">
                            <div class="father">
                                <div class="son"></div>
                            </div>
                        </div>
                        <div class="box3">剩余29件</div>
                    </div>
                    <div class="btn">
                        <button><a href="details.html?id=${item.goods_id}">立即抢购</a></button>
                    </div>
                </li>
                `
            })
            $('.goodslist ul').html(html)
            // 动态渲染页码
            var totalPage = Math.ceil(res.total / pagesize)
            var pageHTML = `
                <li onclick="firstPage()">首页</li>
                <li onclick="prevPage()">上一页</li>
            `
            // 判断总页数 - 一直显示5个页码
            // 总页数大于5
            if(totalPage > 5){
                // 当前页<=3
                if(current <= 3){
                    // 1~5
                    for(var i=1;i<=5;i++){
                        pageHTML += `<li onclick="toPage()" ${i === current ? 'class="active"' : ''}>${i}</li>`
                    }
                }
                // 当前页>=总页数-2
                else if(current >= totalPage - 2){
                    for(var i=totalPage - 4;i<=totalPage;i++){
                        pageHTML += `<li onclick="toPage()" ${i === current ? 'class="active"' : ''}>${i}</li>`
                    }
                }
                // 当前页在中间
                else{
                    for(var i=current - 2;i<=current + 2;i++){
                        pageHTML += `<li onclick="toPage()" ${i === current ? 'class="active"' : ''}>${i}</li>`
                    }
                }
            }
            // 总页数不大于5
            else{
                // 1~总页数
                for(var i=1;i<=totalPage;i++){
                    pageHTML += `<li onclick="toPage()" ${i === current ? 'class="active"' : ''}>${i}</li>`
                }
            }

            pageHTML += `
                <li onclick="nextPage(${totalPage})">下一页</li>
                <li onclick="lastPage(${totalPage})">末页</li>
                <li class="count">共${totalPage}页</li>
                <li class="dao">到</li>
                <li class="pagenum"><input type="text" name="pagenum"></li>
                <li class="ye">页</li>
                <li class="gobtn" onclick="go(this, ${totalPage})"><button>确定</button></li>
            `
            // 判断list数据是否为空
            if(!res.list.length){
                $('.page ul').text('当前条件下暂无商品，请切换条件！')
                return
            }
            $('.page ul').html(pageHTML)
            // 取消加载层
            // layer.close(loadId)
        }
    })
}

// 定义分页的点击事件
function nextPage(totalPage){
    current++
    if(current > totalPage){
        current = totalPage
    }
    getData()
}
function firstPage(){
    current = 1
    getData()
}
function lastPage(totalPage){
    current = totalPage
    getData()
}
function prevPage(){
    current--
    if(current < 1){
        current = 1
    }
    getData()
}
function go(ele, totalPage){
    // console.log(ele);
    var page = $(ele).prev().prev().find('input').val()
    if(page && !isNaN(page)){
        current = page-0
    }
    if(current > totalPage){
        current = totalPage
    }
    if(current < 1){
        current = 1
    }
    getData()
}

// 点击筛选商品事件
$('.goodsfilter').click(function(){
    $(this).addClass('active').siblings().removeClass('active')
    filter = $(this).attr('filter')
    getData()
})

// 选择折扣类型
$('[name="saleType"]').change(function(){
    saleType = this.value-0
    getData()
})

// 点击价格和销量
$('.sortType').click(function(){
    sortType = $(this).attr('type')
    if(sortType === 'price'){
        $(this).toggleClass('pricedown').toggleClass('priceup')
        if($(this).hasClass('priceup')){
            sortMethod = 'ASC'
        }else if($(this).hasClass('pricedown')){
            sortMethod = 'DESC'
        }
    }else if(sortType === 'sale'){
        $(this).toggleClass('saledown').toggleClass('saleup')
        if($(this).hasClass('saleup')){
            sortMethod = 'ASC'
        }else if($(this).hasClass('saledown')){
            sortMethod = 'DESC'
        }
    }
    getData()
})

// 点击搜索按钮
$('.search button.btn').click(function(){
    // 获取输入的关键字
    var keywords = $(this).prev().val().trim()
    // 判断输入的关键字是否为空
    if(keywords === ''){
        return false
    }
    // 将关键字赋值给search变量
    search = keywords
    // 将关键字显示在路径导航下
    $('.breadcrumb.keywords li span').text(keywords)
    // 发送请求
    getData()
})

// 清空关键字
$('.breadcrumb.keywords li b').click(function(){
    // 将关键字变成全部
    $('.breadcrumb.keywords li span').text('全部')
    // 清空搜索框的内容
    $('.search input.text').val('')
    // 将查询数据携带的search参数清空
    search = ''
    getData()
})
function getCookie(key){
    var cookie = document.cookie;
    var arr = cookie.split('; ')
    for(var i=0;i<arr.length;i++){
        var brr = arr[i].split('=')
        if(brr[0] === key){
            return brr[1]
        }
    }
}

// 从cookie中获取存起来的用户名
var username = getCookie('username')
// 判断
if(username){
    $('.fl ul').html(`
        <li>欢迎<a href="userinfo.html" style="color:skyblue;font-size:16px;padding: 0 5px;" class="ma5">${username}</a>登录！</li>
        <li><a class="red" onclick="logout()" style="color: red;">退出登录</a></li>
    `)
}
